<template>
  <div class="flex flex-col h-full">
    <SearchContainer @search="queryList" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="flex-1" :model="formState" :label-col="{ style: { width: '70px' } }">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item name="yqmc" label="仪器名称">
              <a-input v-model:value="formState.yqmc" placeholder="请输入仪器名称" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2 flex-1">
      <div class="mb-3">
        <a-button type="primary" :icon="h(PlusOutlined)" @click="handelrAdd"> 新增仪器 </a-button>
        <a-button class="ml-2" @click="onExport">导出</a-button>
      </div>
      <BaseTable :loading="loading" column-code="00001120" :data-source="tableData" :expand-column-width="30" bordered fill>
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            <div>{{ index + 1 }}</div>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" size="small" @click="onHandleEdit(record)"> 修改 </a-button>
            <a-divider type="vertical" />
            <a-button type="link" size="small"> 启用 </a-button>
            <a-divider type="vertical" />
            <ConfirmModal description="确定停用?" @confirm="onConfirm">
              <a-button type="link" danger size="small"> 停用 </a-button>
            </ConfirmModal>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <Edit v-model:open="editOpen" :open="editOpen" :row-data="rowData" />
  </div>
</template>

<script setup>
// import { post } from '@/utils/request'
import { ref, onMounted, h } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import ConfirmModal from '@/components/ConfirmModal'
// import { message } from 'ant-design-vue'
import Edit from './components/Edit'

// import downloadCSV from '@/utils/tools/downloadCSV'
const rowData = ref({})
const editOpen = ref(false)
const loading = ref(false)
const formRef = ref(null)
const tableData = ref([
  {
    jzbh: '000001',
    dataIndex: 'name',
    zt: '有效'
  },
  {
    jzbh: '000002',
    dataIndex: 'name1',
    zt: '有效'
  }
])
const formState = ref({
  xzck: '',
  ylfl: '',
  radioItem: 1,
  pyjm: ''
})
const handelrAdd = () => {
  editOpen.value = true
}
const onHandleEdit = (row) => {
  rowData.value = row
  editOpen.value = true
}
const queryList = async () => {
  // loading.value = true
  // // formState.value
  // const { code, data } = await post('/outp/mzdj/getOutpRecordInfoList', {
  //   brGzdw: formState.value.brGzdw,
  //   brId: '',
  //   brSfz: formState.value.brSfz,
  //   eddate: formState.value['dateRange']?.[1],
  //   ghys: formState.value.ghys,
  //   ghzt: formState.value.ghzt,
  //   ksdm: formState.value.ksdm.length ? formState.value.ksdm : [],
  //   pyjm: formState.value.pyjm,
  //   stdate: formState.value['dateRange']?.[0],
  //   zdmc: formState.value.zdmc
  // })
  // if (code !== 0) return
  // tableData.value = data
  // loading.value = false
}
onMounted(() => {
  queryList()
})

// const onExport = () => {
//   const title = `库存查询`
//   const head = columns.map((item) => item.title)
//   const data = tableData.value.map((item) => {
//     return columns.map((col) => {
//       return item[col.dataIndex]
//     })
//   })
//   downloadCSV(title, head, data).then(() => {
//     message.success('导出成功')
//   })
// }
</script>
